//划过显示移除消失
var hover = document.querySelector('.nav-r')
var xianshi=document.querySelector('.nav-b');
hover.onmouseenter=function(){
  xianshi.style.display='block';
}
hover.onmouseleave=function(){
  xianshi.style.display='none';
}
//点击变黄加动态渲染
var num1=document.querySelector('.num1')
var num2=document.querySelector('.num2')
var prev=document.querySelector('.prev')
var next=document.querySelector('.next')
num1.onclick=function(){
  num2.className='num2';
  prev.className='prev';
  next.className='next';
  num1.className='num1 active';
  $.ajax({
    url:'../json/json1.json',
    type:'get',
    dataType:'json',
    success:  function (json) {
          $('.good-list ul').html('');
          $.each(json,function(index,item) {
              var newDom = `<li code=${index+1}><a href="./detail page.html">
                <img src=" ${item.scr}" alt="">
                <p class="p1">${item.title}</p>
                <p class="p2">${item.price}</p>
              </a></li>`
              $('.good-list ul').append(newDom);
          });
    }
  })
}
num2.onclick=function(){
  num1.className='num1';
  prev.className='prev';
  next.className='next';
  num2.className='num2 active';
  $.ajax({
    url:'../json/json2.json',
    type:'get',
    dataType:'json',
    success:  function (json) {
          $('.good-list ul').html('');
          $.each(json,function(index,item) {
              var newDom = `<li code=${index+1}><a href="./detail page.html">
                <img src=" ${item.scr}" alt="">
                <p class="p1">${item.title}</p>
                <p class="p2">${item.price}</p>
              </a></li>`
              
              $('.good-list ul').append(newDom);
          });
    }
  })
}
prev.onclick=function(){
  num2.className='num2';
  prev.className='prev active';
  next.className='next';
  num1.className='num1';
  $.ajax({
    url:'../json/json1.json',
    type:'get',
    dataType:'json',
    success:  function (json) {
          $('.good-list ul').html('');
          $.each(json,function(index,item) {
              var newDom = `<li code=${index+1}><a href="./detail page.html">
                <img src=" ${item.scr}" alt="">
                <p class="p1">${item.title}</p>
                <p class="p2">${item.price}</p>
              </a></li>`
              $('.good-list ul').append(newDom);
          });
    }
  })
}
next.onclick=function(){
  num2.className='num2';
  prev.className='prev';
  next.className='next active';
  num1.className='num1';
  $.ajax({
    url:'../json/json2.json',
    type:'get',
    dataType:'json',
    success:  function (json) {
          $('.good-list ul').html('');
          $.each(json,function(index,item) {
              var newDom = `<li code=${index+1}><a href="./detail page.html">
                <img src=" ${item.scr}" alt="">
                <p class="p1">${item.title}</p>
                <p class="p2">${item.price}</p>
              </a></li>`
              $('.good-list ul').append(newDom);
          });
    }
  })
}
//点击变黄
// var goods=document.querySelectorAll('.good-footer div');
// // console.log(goods);
// for (let i = 0; i < goods.length; i++) {
//   goods[i].onclick=function(){
//     // console.log(123);
//     // goods[i].className="active";
//     for(var n=0;n<goods.length;n++){
//       if(n===i){
//         goods[n].className="active";
//       }else{
//         goods[n].className="";
//       }
//     }
//   }
  
// }
// 动态渲染
$.ajax({
  url:'../json/json1.json',
  type:'get',
  dataType:'json',
  success:  function (json) {
        
        $.each(json,function(index,item) {
            var newDom = `<li code=${index+1}><a href="./detail page.html">
              <img src=" ${item.scr}" alt="">
              <p class="p1">${item.title}</p>
              <p class="p2">${item.price}</p>
            </a></li>`
            $('.good-list ul').append(newDom);
        });
  }
});
//点击哪个商品获取商品id
$('.good-list ul').on('click','li', function (){
  var code = $(this).attr('code');
  // console.log(code);
  localStorage.setItem('code',code);
  location.href="detail page.html";
  
})










